<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>三个数字相加不能超过50的页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入css -->
    <link rel="stylesheet" type="text/css" href="./css/staticPage.css" />
</head>

<body>

    <input type="number" class="inputStyle numInput" id="firstParam" data-tipId="1" />

    <input type="number" class="inputStyle numInput" id="secondParam" data-tipId="2" />

    <input type="number" class="inputStyle numInput" id="thirdParam" data-tipId="3" />
    <!-- 引入jquery -->
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {


        })
        //input框改变事件
        
        $('.numInput').bind('input propertychange', function() {
            var sum = 0;
            //获取标记
            var mark = $(this).attr("data-tipId");
            // 获取input的值
            var firstParam = $("#firstParam").val();
            var secondParam = $("#secondParam").val();
            var thirdParam = $("#thirdParam").val();

            //页面相加总和等于50
            switch (mark) {
                case '1':
                    firstParam = parseInt(firstParam);
                    if (firstParam < 0) {
                        firstParam = 0;
                        $("#firstParam").val(firstParam);
                    }
                    if(firstParam > 50) {
                        firstParam = 50;
                        $("#firstParam").val(firstParam);
                    }
                    if (secondParam) {
                        thirdParam = 50 - firstParam - parseInt(secondParam);
                        if (thirdParam < 0) {
                            thirdParam = 0;
                            secondParam = 50 - firstParam;
                            $("#secondParam").val(secondParam);
                        }
                        $("#thirdParam").val(thirdParam);
                    } else if (thirdParam) {
                        secondParam = 50 - firstParam - parseInt(thirdParam);
                        if (secondParam < 0) {
                            secondParam = 0;
                            thirdParam = 50 - firstParam;
                            $("#thirdParam").val(thirdParam);
                        }
                        $("#secondParam").val(secondParam);
                    } else {

                    }
                    break;
                case '2':
                    secondParam = parseInt(secondParam);
                    if (secondParam < 0) {
                        secondParam = 0;
                        $("#secondParam").val(secondParam)
                    }
                    if(secondParam > 50) {
                        secondParam = 50;
                        $("#secondParam").val(secondParam);
                    }
                    if (firstParam) {
                        thirdParam = 50 - secondParam - parseInt(firstParam);
                        if (thirdParam < 0) {
                            thirdParam = 0;
                            firstParam = 50 - secondParam;
                            $("#firstParam").val(firstParam);
                        }
                        $("#thirdParam").val(thirdParam);
                    } else if (thirdParam) {
                        firstParam = 50 - secondParam - parseInt(thirdParam);
                        if (firstParam < 0) {
                            firstParam = 0;
                            thirdParam = 50 - secondParam;
                            $("#thirdParam").val(thirdParam);
                        }
                        $("#firstParam").val(firstParam);
                    } else {

                    }
                    break;
                case '3':
                    thirdParam = parseInt(thirdParam);
                    if (thirdParam < 0) {
                        thirdParam = 0;
                        $("#thirdParam").val(thirdParam)
                    }
                    if(thirdParam > 50) {
                        thirdParam = 50;
                        $("#thirdParam").val(thirdParam);
                    }
                    if (firstParam) {
                        secondParam = 50 - thirdParam - parseInt(firstParam);
                        if (secondParam < 0) {
                            secondParam = 0;
                            firstParam = 50 - thirdParam;
                            $("#firstParam").val(firstParam);
                        }
                        $("#secondParam").val(secondParam);
                    } else if (secondParam) {
                        firstParam = 50 - thirdParam - parseInt(secondParam);
                        if (firstParam < 0) {
                            firstParam = 0;
                            secondParam = 50 - thirdParam;
                            $("#secondParam").val(secondParam);
                        }
                        $("#firstParam").val(firstParam);
                    } else {

                    }

                    break;
                default:
                    console.warn("执行操作有问题了！");

            }

        })
    </script>
</body>

</html>